<template>
	<div class="list_content">
		<div class="box" v-for="(item,index) in lists" @click="detail(item.id)">
			<div class="box_top">
				<img :src="item.image" alt="" class="box_image">
			</div>
			<div class="box_bottom">
				<div class="bottom_title">{{item.name}}</div>
				<div class="bottom_price">¥{{item.price}}</div>
			</div>
		</div>
	</div>
</template>

<script>
	export default {
		name: "goodList",
		props: {
			CategoryId: String,

		},
		data() {
			return {
				lists: []
			};
		},
		created() {
			this.getData()

		},
		watch: {
			CategoryId(newValue, oldValue) {
				this.getData()
			},
		},
		methods: {
			async getData() {
				var response = await this.$http.getProductList({
					"category_id": this.CategoryId
				})
				if (response.code == 1) {
					console.log(response.data)
					// return 
					this.lists = response.data
				}
			},
			detail(id) {
				uni.navigateTo({
					url: "/pages/product/detail?id=" + id
				})
			}
		}

	};
</script>

<style scoped>
	.list_content {
		
		padding: 0px;
		margin: 0px;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		/* height: 100vh; */
		
	}

	.box {
		border: 5px solid white;
		height: 220px;
		margin-top: 10px;
		padding:2px 5px;
		border-radius: 0.5em;
		text-align: left;
		background-color: white;
		width: 42%;
		/* border: 1px solid red; */
		overflow: hidden;

	}

	.box_top {
		margin-top: 10px;
	}

	.box_image {
		width: 80px;
		height: 80px;
		/* border: 1px solid red; */
	}

	.box_bottom {
		width: 100%;
		/* border: 1px solid red; */
		font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
	}

	.bottom_title {
		width: 80%;
		font-size: 10px;
		color: darkgray;
		text-align: left
	}

	.bottom_price {
		font-size: 14px;
		font-weight: 700;
		margin-top: 10px;
		text-align: left
	}
</style>